import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const itemHeight = 50;
  const [items, setItems] = React.useState(
    Array.from({length: 300}, (_, i) => ({
      name: `姓名${i + 1}`,
      age: Math.floor(Math.random() * 50) + 18
    }))
  );
  const [scrollTop, setScrollTop] = React.useState(0);
  const containerHeight = 400;
  
  const startIndex = Math.floor(scrollTop / itemHeight);
  const endIndex = Math.min(
    startIndex + Math.ceil(containerHeight / itemHeight),
    items.length - 1
  );
  
  const topPlaceholderHeight = startIndex * itemHeight;
  const bottomPlaceholderHeight = (items.length - 1 - endIndex) * itemHeight;
  
  return (
    <div className="App">
      <div 
        className="list-container" 
        onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
      >
        <div style={{ height: topPlaceholderHeight }} />
        <div style={{ minHeight: (endIndex - startIndex + 1) * itemHeight }}>
          {Array.from({length: endIndex - startIndex + 1}).map((_, index) => {
            const itemIndex = startIndex + index;
            return (
              <div key={itemIndex} className="list-item">
                {items[itemIndex].name}, {items[itemIndex].age}岁
              </div>
            );
          })}
        </div>
        <div style={{ height: bottomPlaceholderHeight }} />
      </div>
    </div>
  );
}

export default App;
